<template>
  <div class="add-promotion">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ dialogTitle }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 活动基本信息表单 -->
    <el-form
      :model="wineLists"
      ref="form"
      label-width="100px"
      style="margin-top: 1.3rem; padding-right: 2rem"
    >
      <!-- Name -->
      <el-form-item label="活动名称">
        <el-input
          v-model="wineLists.name"
          placeholder="输入活动名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="酒品名">
        <el-input
          v-model="wineLists.w_name"
          placeholder="输入酒品名"
        ></el-input>
      </el-form-item>
      <!-- Start Date -->
      <el-form-item label="日期">
        <el-date-picker
          v-model="wineLists.start_date"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="Select start date"
        ></el-date-picker
        >至<el-date-picker
          v-model="wineLists.end_date"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="Select end date"
        ></el-date-picker>
      </el-form-item>
      <!-- Volume (ml) -->
      <el-form-item label="容量（毫升）">
        <el-input
          v-model="wineLists.volume_ml"
          placeholder="输入容量"
        ></el-input>
      </el-form-item>

      <!-- Alcohol Content -->
      <el-form-item label="酒精含量">
        <el-input
          v-model="wineLists.alcohol_content"
          placeholder="输入酒精含量"
        ></el-input>
      </el-form-item>

      <!-- Image URL -->
      <el-form-item label="图片链接">
        <el-upload
          :show-file-list="false"
          class="avatar-uploader"
          action="http://127.0.0.1:3433/system/upload/upload"
          :on-change="handleUpload"
          ref="myUpload"
        >
          <div class="avatar">
            <img
              v-if=" wineLists.image_url"
              :src="mode === 'add' ? imageUrl : wineLists.image_url"
              style="width: 100%; height: 100%"
            />
            <i v-else class="el-icon-plus add avatar-uploader-icon"></i>
          </div>
        </el-upload>
      </el-form-item>

      <!-- Origin -->
      <el-form-item label="产地">
        <el-input v-model="wineLists.origin" placeholder="输入产地"></el-input>
      </el-form-item>

      <!-- Description -->
      <el-form-item label="描述">
        <el-input
          v-model="wineLists.description"
          type="textarea"
          placeholder="输入描述"
        ></el-input>
      </el-form-item>

      <!-- Promotion ID -->
      <el-form-item label="促销活动ID">
        <el-input
          v-model="wineLists.promotion_id"
          placeholder="输入促销活动ID"
        ></el-input>
      </el-form-item>

      <!-- Type -->
      <el-form-item label="类型">
        <el-input v-model="wineLists.type" placeholder="输入类型"></el-input>
      </el-form-item>

      <!-- Stock Quantity -->
      <el-form-item label="库存数量">
        <el-input
          v-model="wineLists.stock_quantity"
          placeholder="输入库存数量"
        ></el-input>
      </el-form-item>

      <!-- Category ID -->
      <el-form-item label="分类ID">
        <el-input
          v-model="wineLists.category_id"
          placeholder="输入分类ID"
        ></el-input>
      </el-form-item>

      <!-- Price -->
      <el-form-item label="价格">
        <el-input v-model="wineLists.price" placeholder="输入价格"></el-input>
      </el-form-item>

      <!-- Vintage Year -->
      <el-form-item label="年份">
        <el-input
          v-model="wineLists.vintage_year"
          placeholder="输入年份"
        ></el-input>
      </el-form-item>

      <!-- Discount Percent -->
      <el-form-item label="折扣百分比">
        <el-input
          v-model="wineLists.discount_percent"
          placeholder="输入折扣百分比"
        ></el-input>
      </el-form-item>

      <!-- Wine ID -->
      <el-form-item label="酒品ID">
        <el-input
          v-model="wineLists.wine_id"
          placeholder="输入酒品ID"
        ></el-input>
      </el-form-item>

      <!-- Submit Button -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { updateWine, addWine } from "@/api/winepromotion";
import { Message } from "element-ui";
import { winelist } from "@/api/wine";
export default {
  props: {
    wineList: {
      type: Object,
      default: () => ({}),
    },
    mode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      promotion: {
        name: "",
        dateRange: [],
        selectedWines: [],
        discountPercent: 0,
        // 其他活动信息字段，根据实际需求添加
      },
      wineLists: {},
      imageUrl: "",
      availableWines: [
        { wineId: 1, name: "Wine A" },
        { wineId: 2, name: "Wine B" },
        // 其他酒品信息，从后端获取或硬编码
      ],
    };
  },
  computed: {
    dialogTitle() {
      return this.mode === "add" ? "添加酒品" : "编辑酒品";
    },
  },
  created() {
   console.log(this.mode);
    this.wineLists = this.wineList;
  },
  methods: {
    submitForm() {
      if (this.mode === "add") {
        this.add();
      } else {
        this.edite();
      }
    },
    async add() {
      const wineu = {
        alcoholContent: this.wineLists.alcohol_content,
        categoryId: this.wineLists.category_id,
        description: this.wineLists.description,
        imageUrl: this.wineLists.image_url,
        origin: this.wineLists.origin,
        price: this.wineLists.price,
        stockQuantity: this.wineLists.stock_quantity,
        type: this.wineLists.type,
        vintageYear: this.wineLists.vintage_year,
        volumeMl: this.wineLists.volume_ml,
        wineId: this.wineLists.wine_id,
        wname: this.wineLists.w_name,
      };
      const additionalProperties = Object.keys(this.wineLists).reduce(
        (result, key) => {
          const camelKey = underscoreToCamel(key);
          if (!wineu.hasOwnProperty(camelKey)) {
            result[key] = this.wineLists[key];
          }
          return result;
        },
        {}
      );
      function underscoreToCamel(str) {
        return str.replace(/_([a-z])/g, (_, match) => match.toUpperCase());
      }
      console.log(wineu);
      const promotions = {
        discountPercent: additionalProperties.discount_percent,
        endDate: additionalProperties.end_date,
        name: additionalProperties.name,
        promotionId: additionalProperties.promotion_id,
        startDate: additionalProperties.start_date,
      };
      const param = {
        promotionId: this.wineLists.promotion_id,
        wineId: this.wineLists.wine_id,
        wine: wineu,
        promotion: promotions,
      };
      const res = await addWine(param);
      if (res.code == 200) {
        Message(res.message);
      } else {
        Message(res.message);
      }
    },
    async edite() {
      const wineu = {
        alcoholContent: this.wineLists.alcohol_content,
        categoryId: this.wineLists.category_id,
        description: this.wineLists.description,
        imageUrl: this.wineLists.image_url,
        origin: this.wineLists.origin,
        price: this.wineLists.price,
        stockQuantity: this.wineLists.stock_quantity,
        type: this.wineLists.type,
        vintageYear: this.wineLists.vintage_year,
        volumeMl: this.wineLists.volume_ml,
        wineId: this.wineLists.wine_id,
        wname: this.wineLists.w_name,
      };
      const additionalProperties = Object.keys(this.wineLists).reduce(
        (result, key) => {
          const camelKey = underscoreToCamel(key);
          if (!wineu.hasOwnProperty(camelKey)) {
            result[key] = this.wineLists[key];
          }
          return result;
        },
        {}
      );
      function underscoreToCamel(str) {
        return str.replace(/_([a-z])/g, (_, match) => match.toUpperCase());
      }
      console.log(wineu);
      const promotions = {
        discountPercent: additionalProperties.discount_percent,
        endDate: additionalProperties.end_date,
        name: additionalProperties.name,
        promotionId: additionalProperties.promotion_id,
        startDate: additionalProperties.start_date,
      };
      const param = {
        promotionId: this.wineLists.promotion_id,
        wineId: this.wineLists.wine_id,
        wine: wineu,
        promotion: promotions,
      };
      const res = await updateWine(param);
      if (res.code == 200) {
        Message(res.message);
      } else {
        Message(res.message);
      }
    },
    handleUpload(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      const uploadedFile = fileList.find((item) => item.name === file.name);
      console.log(this.imageUrl);
      if (
        uploadedFile &&
        uploadedFile.response &&
        uploadedFile.response.data.url
      ) {
        // 从后端返回的数据中提取文件地址，并保存到你的数据中
        const fileUrl = uploadedFile.response.data.url;
        this.wineLists.image_url = fileUrl;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* 添加一些样式以美化页面 */
.add-promotion {
  margin: auto;
  padding: 18px;
}
.dfd {
  margin-top: 28px;
  max-width: 800px;
}
.avatar-uploader {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  line-height: 100px;
  vertical-align: top;
  text-align: center;
  .el-upload {
    height: 100px !important;
  }
}
.avatar {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 6px;
}
.add {
  font-size: 3rem;
  line-height: 2;
  color: #bbb6b6;

  text-align: center;
}
</style>
